<template>
  <div>
<el-dialog title="入住登记" :visible="flag" @close="btnCancel">
     <el-form ref="form" :rules="DateRules" :model="formDate" label-width="120px">
  <el-form-item label="姓名" style="width:50%;" prop="username">
    <el-input v-model="formDate.username"></el-input>
  </el-form-item>
   <el-form-item label="电话号码" style="width:50%;" prop="phoneNum">
    <el-input v-model="formDate.phoneNum"></el-input>
  </el-form-item>
  <el-form-item label="身份证号码" style="width:50%;" prop="IdNumber">
    <el-input v-model="formDate.IdNumber"></el-input>
  </el-form-item>
  <el-form-item label="押金" style="width:50%;" prop="deposit">
    <el-input v-model="formDate.deposit"></el-input>
  </el-form-item>
  <el-form-item label="入住时间" prop="dataTime">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="formDate.dataTime" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="formDate.dataTime" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="退房时间" prop="leavetime">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="formDate.leavetime" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="formDate.leavetime" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="房间类型" prop="roomTypes">
    <el-select v-model="formDate.roomType" placeholder="请选择房间类型" @change="getRoomList">
         <el-option
          v-for="item in roomTypes"
          :value="item.id"
          :key="item.id"
          :label="item.value"
         /> 
    </el-select>
  </el-form-item>
  <el-form-item label="房间号" prop="roomNum">
    <el-select v-model="formDate.roomNum" placeholder="请选择房间号">
      <el-option
          v-for="item in roomsList"
          :value="item.num"
          :key="item.id"
          :label="item.num"
         /> 
    </el-select>
  </el-form-item>
  <el-row type="flex" justify="center">
    <el-col :span="8">
    <el-button type="primary" @click="btnOK">立即提交</el-button>
    <el-button @click="btnCancel">取消</el-button>
    </el-col>
  </el-row>
</el-form>
</el-dialog>
  </div>
</template>

<script>
import {getRoomList,repairRoom} from '@/api/rooms'
import { getUsersList,addUser} from '@/api/users'

import Rooms from '@/utils/constant/rooms'
export default {
  data () {
    return {
    roomTypes:Rooms.type,
    roomsList:[],
    roomId:'',
    formDate: {
         phoneNum:'',
          username: '',
          IdNumber:'',
          roomType:'',
          roomNum:'',
          dataTime: '',
          leavetime: '',
          allmoney:'',
          deposit:''
        },
    DateRules:{
            username:[{required: true, trigger: 'blur', message:'姓名不能为空'}],
            dataTime:[{required: true, trigger: 'blur',message:'入住时间还未填写'}],
            deposit:[{required:true,trigger:'blur',message:'押金还未填写'}],
            leavetime:[{required: true, trigger: 'blur',message:'退房时间还未选择'}],
            roomType:[{required: true, trigger: 'blur',message:'请选择房间类型'}],
            roomNum:[{required: true, trigger: 'blur',message:'请选择房间型号'}],
            phoneNum:[{required: true, trigger: 'blur',message:'手机号不能为空',minlength:'11',maxlength:'11',number:true}
            ,{pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,message:'手机号格式不正确', trigger: 'blur'}],
            IdNumber:[{required:true,trigger:'blur',message:'身份证号不能为空'},{
              pattern:/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,message:'身份证格式不正确',trigger:'blur'
            }]
        },    
    }
  },
  created () {
    this.getUsersList()
  },
  mounted () {
    
  },
  methods: {
      
        async getRoomList(){
        // 拿到所有房间信息
        // console.log(this.formDate.roomType);
      this.formDate.roomNum=' '
      const res =  await  getRoomList({type_like:this.formDate.roomType,state_like:2})
      
      this.roomsList=Array.from(new Set(res))
      // console.log(res)
    },
      
     async getUsersList(){
        this.tableList=await getUsersList()
        // console.log(this.tableList);
      },
      //立即提交
      btnOK(){
         this.$refs.form.validate(async  isOK=>{
           if(isOK){
            //  处理时间戳
             this.formDate.dataTime=(new Date(this.formDate.dataTime)).getTime()
             this.formDate.leavetime=(new Date(this.formDate.leavetime)).getTime()
            const time= Math.ceil((this.formDate.leavetime-this.formDate.dataTime)/24/3600/1000)
            await addUser({...this.formDate,time:time})
            const room = await getRoomList({num_like:this.formDate.roomNum})
            // console.log(room);
            await repairRoom({...room[0],state:1,time:room[0].time+time})
             this.$parent.getUsersList()//当我们提交成功时 我们需要调用父组件的更新
             this.$message.success('登记成功')
             this.$parent.showDialog=false

           }
         })
      },
      btnCancel(){
      this.formDate= {
          number:'',
          name: '',
          sex: '',
          IDnumber:'',
          roomTypes:'',
          roomsList:[],
          dataTime: '',
          leavetime: '',
          roomNum:''
        },
      this.$refs.form.resetFields() // 移除之前的校验
      this.$emit('update:flag',false)
      },
      
    
  },
  props:{
    flag:{
        type:Boolean,
        default:false
    }
  }
}
</script>

<style scoped lang="sass">

</style>
